"""
@author: Gaoyaoxia
@date: 2021-03-16 11:38:26
"""
<!-- 详情 -->
<template>
  <div class="proposal-detail-content">
    <div class="detail-content" style="height: 888px">
      <img
        class="top-bg"
        :src="require('assets/images/proposal/top.jpg')"
        alt
      />
      <div class="center-content">
        <div class="header-content">
          <i class="guohui-ico"></i>
          <span>政协第十四届合肥市委员会第四次会议第0012提案</span>
        </div>
        <div class="main-content">
          <div class="proposal-detail-section">
            <h3>
              <span v-if="isImportant">重点提案</span>
              春运来了,湖南铁路织密疫情防控网1
            </h3>
            <div class="poposal-detail-section-content word">
              <p></p>
            </div>
            <div class="keywords">
              <label>关键词：</label>
              <div class="inline-block">
                <span>11</span>
              </div>
            </div>
            <div class="proposal-detail-message clear">
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label"
                  >提交时间：</label
                >
                <div class="proposal-detail-message-item-content">
                  2021-03-11 16:11
                </div>
              </div>
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label"
                  >提案类别：</label
                >
                <div class="proposal-detail-message-item-content"></div>
              </div>
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label"
                  >提案状态：</label
                >
                <div class="proposal-detail-message-item-content">
                  已立案(办理中)
                </div>
              </div>
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label"
                  >提案者：</label
                >
                <div class="proposal-detail-message-item-content">李菲菲</div>
              </div>
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label">界别：</label>
                <div class="proposal-detail-message-item-content">
                  中国国民党革命委员会
                </div>
              </div>
              <div class="proposal-detail-message-item" style="width: 33.333%">
                <label class="proposal-detail-message-item-label">党派：</label>
                <div class="proposal-detail-message-item-content">
                  中国共产党
                </div>
              </div>
              <div class="proposal-detail-message-item" style="width: 100%">
                <label class="proposal-detail-message-item-label"
                  >联名人：</label
                >
                <div class="proposal-detail-message-item-content">
                  程翔,李四,张三
                </div>
              </div>
              <div class="proposal-detail-message-item" style="width: 100%">
                <label class="proposal-detail-message-item-label"
                  >工作单位及职务：</label
                >
                <div class="proposal-detail-message-item-content">
                  合肥市农业委员会调研员, 九三学社合肥市委副主委
                </div>
              </div>
            </div>
          </div>
          <div class="section-content" id="mainContent">
            <div class="section-title">
              <h3 class="inline-block tab-name">提案内容</h3>
            </div>
            <div class="proposal-content">
              <p class="word">11</p>
            </div>
          </div>
          <div class="section-content" id="handleInfo">
            <div class="section-title">
              <h3 class="inline-block tab-name">办理情况</h3>
            </div>
            <div class="handling-situation">
              <div class="handling-situation-item">
                <label>主办单位：</label>
                <div class="handling-situation-item-content">市教育局</div>
              </div>
              <div class="handling-situation-item">
                <label>签收时间：</label>
                <div class="handling-situation-item-content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img
        class="bottom-bg"
        :src="require('assets/images/proposal/bottom.jpg')"
        alt
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
        isImportant: false
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {},
  created() {}
}
</script>
<style lang='less' scoped>
.proposal-detail-content {
  position: relative;
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .top-big {
    width: 100%;
    position: absolute;
    top: 0;
  }
  .bottom-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  img {
    display: inline-block;
    border: none;
    vertical-align: middle;
  }
}
.detail-content {
  width: 100%;
  background: #f5f5f5;
  position: relative;
  .center-content {
    width: 1200px;
    margin: 0 auto;
    z-index: 99;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -600px;
  }
  .header-content {
    height: 110px;
    line-height: 110px;
    font-size: 30px;
    font-weight: bold;
    color: #e2201c;
    width: 1080px;
    text-align: center;
    i.guohui-ico {
      display: inline-block;
      width: 57px;
      height: 57px;
      background: url('../../../../assets/images/proposal/guohui-ico.png')
        no-repeat;
      background-size: contain;
      vertical-align: middle;
    }
  }
  .main-content {
    position: absolute;
    left: 0;
    width: 1080px;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 30px 15px 25px 20px;
  }
}
.proposal-detail-section {
  margin-bottom: 25px;
  h3 {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
    span {
      display: inline-block;
      width: 95px;
      height: 30px;
      line-height: 30px;
      color: #ee1515;
      font-size: 16px;
      background: #f9e9e9;
      border-radius: 40px;
      text-align: center;
      margin-right: 20px;
    }
  }
  .poposal-detail-section-content {
    margin: 30px 0;
  }
  .keywords {
    color: #919191;
    font-size: 16px;
    margin-bottom: 10px;
    span {
      padding: 0 15px;
      color: #333;
    }
  }
  .proposal-detail-message {
    padding: 5px 30px 30px 30px;
    box-sizing: border-box;
    background: #f5f5f5;
    font-size: 16px;
    color: #333333;
  }
  .proposal-detail-message-item {
    float: left;
    margin-top: 20px;
    .proposal-detail-message-item-label {
      float: left;
      color: #919191;
    }
    .proposal-detail-message-item-content {
      float: left;
      max-width: 70%;
      overflow: hidden;
    }
  }
}
.section-content {
  margin-bottom: 25px;
  .handling-situation {
    position: relative;
    overflow: hidden;
  }
  .handling-situation-item {
    float: left;
    font-size: 16px;
    width: 100%;
    margin-bottom: 20px;
    label {
      width: 90px;
      color: #919191;
      float: left;
    }
    .handling-situation-item-content {
      margin-left: 90px;
      color: #333333;
    }
  }
}
.section-title {
  height: 35px;
  line-height: 30px;
  border-bottom: 1px solid #d7e3ec;
  margin-bottom: 15px;
}
.word {
  font-family: 'SimSun';
  font-size: 20px;
  color: #333;
  line-height: 1.5;
}
.inline-block {
  display: inline-block;
}
.tab-name {
  font-size: 16px;
  color: #097bc7;
  border-bottom: 2px solid #097bc7;
  font-weight: bold;
  padding: 2px 1px;
  box-sizing: border-box;
}
</style>